<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/echarts/echarts.min.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>统计分析
            <small>全年会员和已就诊人数统计</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计分析</el-breadcrumb-item>
            <el-breadcrumb-item>全年会员和已就诊人数统计</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="chart1" style="height:600px;"></div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('chart1'));
    // 使用刚指定的配置项和数据显示图表。
    //myChart.setOption(option);

    axios.get("/report/getMovementReport.do").then((res) => {
        //获取所需要的月份，其实就是X周的数据
        var xData = function () {
            var data =res.data.data.months;

            return data;
        }();

        myChart1.setOption({

            backgroundColor: "#344b58",//整体背景颜色
            "title": {
                "text": "全年会员和已就诊人数统计",//正标题
                "subtext": "折线、柱形、特效三重统计",//符标题
                x: "4%",

                textStyle: {
                    color: '#fff',//正标题的颜色
                    fontSize: '22'//正标题的字体大小
                },
                subtextStyle: {
                    color: '#90979c',//符标题的颜色
                    fontSize: '16',//副标题的字体大小

                },
            },
            "tooltip": {
                "trigger": "axis",
                "axisPointer": {
                    "type": "shadow",
                    textStyle: {
                        color: "#fff"
                    }

                },
            },//待定


            "grid": {
                "borderWidth": 0,
                "top": 110,
                "bottom": 95,
                textStyle: {
                    color: "#fff"
                }
            },//分类的，显示在Y轴的上方，而不是紧挨着Y轴

            "legend": {
                x: '4%',
                top: '11%',
                textStyle: {
                    color: '#90979c',
                },


                "data": ['会员', '已就诊', '平均']//需要显示的分类
            },


            "calculable": true,
            //x轴
            "xAxis": [{
                "type": "category",
                "axisLine": {
                    lineStyle: {
                        color: '#90979c'//x轴显示的颜色
                    }
                },
                "splitLine": {
                    "show": false
                },
                "axisTick": {
                    "show": false
                },
                "splitArea": {
                    "show": false
                },
                "axisLabel": {
                    "interval": 0,

                },
                "data": xData,//数据的显示
            }],

            //y轴
            "yAxis": [{
                "type": "value",
                "splitLine": {
                    "show": false
                },
                "axisLine": {
                    lineStyle: {
                        color: '#90979c'
                    }
                },//y轴显示的颜色
                "axisTick": {
                    "show": false
                },
                "axisLabel": {
                    "interval": 0,

                },
                "splitArea": {
                    "show": false
                },

            }],


            "dataZoom": [{//都是样式
                "show": true,
                "height": 30,//左右移动的框的高度
                "xAxisIndex": [//这里是x与y的0坐标，必须是0，且必须要有
                    0
                ],
                bottom: 30,//左右移动的框，向上移动的距离
                "start": 10,
                "end": 80,
                handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                handleSize: '110%',
                handleStyle: {
                    color: "#d3dee5",

                },
                textStyle: {
                    color: "#fff"
                },
                borderColor: "#90979c"
            },
                {
                    "type": "inside",//左右移动的框显示的格式
                    "show": true,
                    "height": 15,
                    "start": 1,
                    "end": 35
                }],

            //----------------------------------------------------------------------------------
            //第一种类型的显示，也就是下圆柱
            "series": [{
                "name": "会员",//其中一个类型的名字
                "type": "bar",//整体柱形图
                "stack": "总量",
                "barMaxWidth": 35,//整体柱形的宽度
                "barGap": "10%",
                "itemStyle": {
                    "normal": {//先半边柱形的显示样式
                        "color": "rgba(255,144,128,1)",
                        "label": {
                            "show": true,
                            "textStyle": {
                                "color": "#fff"
                            },
                            "position": "insideTop",
                            formatter: function (p) {
                                return p.value > 0 ? (p.value) : '';
                            }
                        }
                    }
                },

                //下半圆柱的数据展示（女）。这里需要SQL动态获取
                /*"data": [res.data.data.lsit1]*/
                data: res.data.data.memberCount

            },

//--------------------------------------------------------------------
//以下为上半圆柱
                {
                    "name": "已就诊",
                    "type": "bar",//圆柱
                    "stack": "总量",
                    "itemStyle": {
                        "normal": {
                            "color": "rgba(0,191,183,1)",
                            "barBorderRadius": 0,
                            "label": {
                                "show": true,
                                "position": "top",
                                formatter: function (p) {
                                    return p.value > 0 ? (p.value) : '';
                                }
                            }
                        }
                    },

                    //上班圆柱的数据展示（男），。这里需要从SQL动态获取
                    /*"data": [res.data.data.list2]*/
                    data: res.data.data.reservationsCount


                },

//--------------------------------------------------------------------
//以下为折线
                {
                    "name": "总数",
                    "type": "line",
                    "stack": "总量",
                    symbolSize: 10,
                    symbol: 'circle',
                    "itemStyle": {
                        "normal": {
                            "color": "rgba(252,230,48,1)",
                            "barBorderRadius": 0,
                            "label": {
                                "show": true,
                                "position": "top",
                                formatter: function (p) {
                                    return p.value > 0 ? (p.value) : '';
                                }
                            }
                        }
                    },

                    //这里为折线的数据展示。就是上下圆柱的和
                    /*"data": []*/
                    data: res.data.data.AndList

                },
            ]

        });


    });
</script>
</html>

<!--



option = {
    backgroundColor: "#344b58",//整体背景颜色
    "title": {
        "text": "本年商场顾客男女人数统计",//正标题
        "subtext": "BY Wang Dingding",//符标题
        x: "4%",

        textStyle: {
            color: '#fff',//正标题的颜色
            fontSize: '22'//正标题的字体大小
        },
        subtextStyle: {
            color: '#90979c',//符标题的颜色
            fontSize: '16',//副标题的字体大小

        },
    },


    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "type": "shadow",
            textStyle: {
                color: "#fff"
            }

        },
    },//待定


    "grid": {
        "borderWidth": 0,
        "top": 110,
        "bottom": 95,
        textStyle: {
            color: "#fff"
        }
    },//分类的，显示在Y轴的上方，而不是紧挨着Y轴

    "legend": {
        x: '4%',
        top: '11%',
        textStyle: {
            color: '#90979c',
        },
        "data": ['女', '男', '平均']//需要显示的分类
    },


    "calculable": true,
    //x轴
    "xAxis": [{
        "type": "category",
        "axisLine": {
            lineStyle: {
                color: '#90979c'//x轴显示的颜色
            }
        },
        "splitLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "splitArea": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,

        },
        "data": xData,//数据的显示
    }],

    //y轴
    "yAxis": [{
        "type": "value",
        "splitLine": {
            "show": false
        },
        "axisLine": {
            lineStyle: {
                color: '#90979c'
            }
        },//y轴显示的颜色
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,

        },
        "splitArea": {
            "show": false
        },

    }],


    "dataZoom": [{//都是样式
        "show": true,
        "height": 30,//左右移动的框的高度
        "xAxisIndex": [//这里是x与y的0坐标，必须是0，且必须要有
           0
        ],
        bottom: 30,//左右移动的框，向上移动的距离
        "start": 10,
        "end": 80,
        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        handleSize: '110%',
        handleStyle:{
            color:"#d3dee5",

        },
           textStyle:{
            color:"#fff"},
           borderColor:"#90979c"


    },



    {
        "type": "inside",//左右移动的框显示的格式
        "show": true,
        "height": 15,
        "start": 1,
        "end": 35
    }],

    //----------------------------------------------------------------------------------
    //第一种类型的显示，也就是下圆柱
    "series": [{
            "name": "女",//其中一个类型的名字
            "type": "bar",//整体柱形图
            "stack": "总量",
            "barMaxWidth": 35,//整体柱形的宽度
            "barGap": "10%",
            "itemStyle": {
                "normal": {//先半边柱形的显示样式
                    "color": "rgba(255,144,128,1)",
                    "label": {
                        "show": true,
                        "textStyle": {
                            "color": "#fff"
                        },
                        "position": "insideTop",
                        formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },


            "data": [//下半圆柱的数据展示（女）。这里需要SQL动态获取
                709,
                1917,
                2455,
                2610,
                1719,
                1433,
                1544,
                3285,
                5208,
                3372,
                2484,
                4078
            ],
        },

//--------------------------------------------------------------------
//以下为上半圆柱
        {
            "name": "男",
            "type": "bar",//圆柱
            "stack": "总量",
            "itemStyle": {
                "normal": {
                    "color": "rgba(0,191,183,1)",
                    "barBorderRadius": 0,
                    "label": {
                        "show": true,
                        "position": "top",
                        formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },

            "data": [//上班圆柱的数据展示（男），。这里需要从SQL动态获取
                327,
                1776,
                507,
                1200,
                800,
                482,
                204,
                1390,
                1001,
                951,
                381,
                220
            ]
        },

//--------------------------------------------------------------------
//以下为折线
        {
            "name": "总数",
            "type": "line",
            "stack": "总量",
            symbolSize:10,
            symbol:'circle',
            "itemStyle": {
                "normal": {
                    "color": "rgba(252,230,48,1)",
                    "barBorderRadius": 0,
                    "label": {
                        "show": true,
                        "position": "top",
                        formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },

            "data": [//这里为折线的数据展示。就是上下圆柱的和
                1036,
                3693,
                2962,
                3810,
                2519,
                1915,
                1748,
                4675,
                6209,
                4323,
                2865,
                4298
            ]
        },
    ]
}



















-->
